<template>
  <BubblingSortingTp
    :arr="arr"
    :onSort="onSort"
    :onReset="onReset"
    :boundary="boundary"
    :sortingArr="sortingArr"
    :sorting="sorting"
    :showCode="showCode"
    :arrToString="arrToString"
  >
    <template #boundary="b">
      <div><div v-if="b.key < boundary" class="complete">✓</div></div>
    </template>
  </BubblingSortingTp>
</template>
<script setup lang="ts">
import BubblingSortingTp from '@/components/BubblingSortingTp.vue'

import useSort from '../useSort'
const {
  onReset: _onReset,
  arr,
  boundary,
  sortingArr,
  exchangeArr,
  sorting,
  showCode,
  arrToString,
  myWait
} = useSort()
boundary.value = 0
async function onSort() {
  if (sorting.value) return
  sorting.value = true

  for (let i = 0; i < arr.length - 1; i++) {
    boundary.value = i
    for (let j = i + 1; j < arr.length; j++) {
      sortingArr.value = [i, j]
      await myWait(500)
      if (arr[j] < arr[i]) {
        exchangeArr.value = [j, i]
        await myWait(600)
      }
    }
  }

  boundary.value = arr.length
  sorting.value = false
  sortingArr.value = []
}
function onReset() {
  _onReset()
  boundary.value = 0
}
</script>
<style scoped></style>
